<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <div class="top">
          <dv-decoration-10 class="dv-dec-10" />
          <!-- <dv-decoration-8 class="dv-dec-8" :color="['#568aea', '#000000']" /> -->
          <div class="logo">
            <img src="../../assets/logo.png" alt="">
          </div>
          <div>
            <span class="title-text">星云数采边缘计算平台</span>
            <dv-decoration-6 class="dv-dec-6" :reverse="true" :color="['#50e3c2', '#67a1e5']" />
          </div>
          <span class="text">
            {{ timeInfo.dateYear }} {{ timeInfo.dateWeek }}
            {{ timeInfo.dateDay }}
          </span>
          <dv-decoration-10 class="dv-dec-10-s" />
        </div>

        <div class="body-box">
          <div class="content-box">
            <statics title="设备类型" :num="100" />
            <statics title="设备类型" :num="100" />
            <statics title="正常设备" :num="100" />
            <statics title="离线设备" :num="100" />
            <statics title="采集点位" :num="100" />
            <statics title="规则总数" :num="100" />
            <statics title="采集总数" :num="100" />
          </div>
          <div class="bototm-box">
            <chart id="chart" />
            <chart />
            <chart />
            <chart />
            <chart />
            <chart />
            <chart />
            <chart />
            <chart />
            <chart />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, onMounted, onBeforeUnmount } from 'vue'
import { formatTime } from '@/utils/index'
import { WEEK } from '@/constant/index'
import useIndex from '@/utils/useDraw'
import { title, subtitle, moduleInfo } from '@/constant/index'
import statics from '../staticis/index.vue'
import chart from '../chart/charts.vue'

export default defineComponent({
  components: {
    statics,
    chart,
  },
  setup() {
    // * 加载标识
    const loading = ref<boolean>(true)
    // * 时间内容
    const timeInfo = reactive({
      setInterval: 0,
      dateDay: '',
      dateYear: '',
      dateWeek: '',
    })
    // * 适配处理
    const { appRef, calcRate, windowDraw } = useIndex()
    // 生命周期
    onMounted(() => {
      cancelLoading()
      handleTime()
      // todo 屏幕适应
      windowDraw()
      calcRate()
    })

    onBeforeUnmount(() => {
      clearInterval(timeInfo.setInterval)
    })

    // methods
    // todo 处理 loading 展示
    const cancelLoading = () => {
      setTimeout(() => {
        loading.value = false
      }, 500)
    }

    // todo 处理时间监听
    const handleTime = () => {
      timeInfo.setInterval = setInterval(() => {
        const date = new Date()
        timeInfo.dateDay = formatTime(date, 'HH: mm: ss')
        timeInfo.dateYear = formatTime(date, 'yyyy-MM-dd')
        timeInfo.dateWeek = WEEK[date.getDay()]
      }, 1000)
    }

    // return
    return {
      loading,
      timeInfo,
      appRef,
      title,
      subtitle,
      moduleInfo,
    }
  },
})
</script>

<style lang="scss" scoped>
@import '@/assets/scss/index.scss';
</style>
